// 创建一个axios实例
// 设置请求拦截器：判断是否有token ，如果有的话对token进行头部携带
// 设置响应拦截器：对响应回来的数据经行处理，剥离无效数据，处理失效的token
// 导出请求函数：实现axios对后端数据的请求，返回值为promise

import axios from 'axios'
import store from '@/store'
import router from '@/router'

// export const baseURL = 'https://apipc-xiaotuxian-front.itheima.net/'
export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net'

const instance = axios.create({
  baseURL, // 请求地址
  timeout: 5000 // 请求时间
})

// 设置请求拦截器
instance.interceptors.request.use((config) => {
  // 结构vuex的token 数据
  const { profile } = store.state.user
  // 判断token数据是否存在
  if (profile.token) {
    // 设置token请求
    config.headers.Authorization = `Bearer ${profile.token}`
  }

  return config
}, err => {
  return Promise.reject(err)
})

// 设置响应拦截器 分解出目标数据
instance.interceptors.response.use(res => res.data, err => {
  // 判断后端响应回来的错误是否是401
  if (err.response && err.response.status === 401) {
    store.commit('user/setUser', {})

    // 设置当前路由地址
    // 在组件的时候，如'user/id=3 '$router.path() 只能拿到'/user/' 如果要拿到完整地址的话 需要$router.fullPath()
    // 在js模块中，则需要用router.currentRouter.value.fullPath()
    // 但由于地址中会出现如&等分割符号，则我们需要对其进行转义，使用encodeURIcomponent转换URI编码
    const fullPath = encodeURIComponent(router.currentRoute.value.fullPath)

    // 进行页面跳转
    router.push('/login/redirectUrl=' + fullPath)
  }
  return Promise.reject(err)
})

// 导出请求工具
export default (url, method, submitData) => {
  return instance({
    url,
    method,
    // 判断method传进来的参数是不是get请求， 是的话数据为params形式，反之则为data形式 toLowerCase转换小写
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}
